<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import $api from '@/api/api'
import { Search, Money } from '@element-plus/icons-vue'

// 搜索表单数据
const searchForm = reactive({
  sno: ''
})

// 缴费表单数据
const payForm = reactive({
  sno: '',
  payAmount: ''
})

// 表格数据
const tableData = ref([])
const loading = ref(false)
const payDialogVisible = ref(false)
const payLoading = ref(false)

// 获取罚款记录
const fetchFineRecords = async () => {
  loading.value = true
  try {
    const res = await $api.getFineRecord(searchForm)
    if (res.code === 1) {
      tableData.value = res.data
    } else {
      ElMessage.error(res.msg || '获取罚款记录失败')
    }
  } catch (error) {
    ElMessage.error('获取罚款记录失败')
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  fetchFineRecords()
}

// 重置搜索
const handleReset = () => {
  searchForm.sno = ''
  handleSearch()
}

// 打开缴费对话框
const openPayDialog = () => {
  payForm.sno = ''
  payForm.payAmount = ''
  payDialogVisible.value = true
}

// 提交缴费
const submitPay = async () => {
  if (!payForm.sno || !payForm.payAmount) {
    ElMessage.warning('请填写完整的缴费信息')
    return
  }

  try {
    payLoading.value = true
    const res = await $api.payFine(payForm)
    if (res.code === 1) {
      ElMessage.success('缴费登记成功')
      payDialogVisible.value = false
      fetchFineRecords()
    } else {
      ElMessage.error(res.msg || '缴费登记失败')
    }
  } catch (error) {
    ElMessage.error('缴费登记失败')
  } finally {
    payLoading.value = false
  }
}

onMounted(() => {
  fetchFineRecords()
})
</script>

<template>
  <div class="penalty-manage-page">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <div class="search-header">
        <h2>罚款管理</h2>
        <el-button type="primary" @click="openPayDialog" :icon="Money">
          登记缴费
        </el-button>
      </div>
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="学号">
          <el-input v-model="searchForm.sno" placeholder="请输入学号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 罚款记录列表 -->
    <el-card class="list-card" shadow="hover">
      <el-table
          :data="tableData"
          v-loading="loading"
          border
          stripe
          style="width: 100%"
          class="custom-table"
          empty-text="暂无罚款记录"
      >
        <el-table-column prop="serNum" label="流水号" width="120" />
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="sno" label="学号" min-width="120" />
        <el-table-column label="缴费金额" min-width="120">
          <template #default="{ row }">
            <span class="money">¥{{ row.payAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payDate" label="缴费日期" min-width="120" />
      </el-table>
      <div v-if="!loading && tableData.length === 0" class="empty-tip">
        <img src="/src/assets/images/404.png" alt="empty" />
        <div>暂无罚款记录</div>
      </div>
    </el-card>

    <!-- 缴费对话框 -->
    <el-dialog
        v-model="payDialogVisible"
        title="登记缴费"
        width="400px"
        :close-on-click-modal="false"
    >
      <el-form :model="payForm" label-width="80px">
        <el-form-item label="学号" required>
          <el-input
              v-model="payForm.sno"
              placeholder="请输入学号"
              clearable
          />
        </el-form-item>
        <el-form-item label="缴费金额" required>
          <el-input
              v-model="payForm.payAmount"
              type="number"
              placeholder="请输入缴费金额"
              clearable
          >
            <template #prefix>¥</template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="payDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPay" :loading="payLoading">
            确认缴费
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.penalty-manage-page {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(120deg, #e4ecfb 0%, #f5f7fa 100%);
  font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
}

.search-card {
  margin-bottom: 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 32px 0 rgba(80, 120, 255, 0.13);
  backdrop-filter: blur(14px);
  border: 1.5px solid #e0e7ff;
  transition: box-shadow 0.3s, border 0.3s;
}
.search-card:hover {
  box-shadow: 0 10px 40px 0 rgba(80, 120, 255, 0.18);
  border: 1.5px solid #6e8efb;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.search-header h2 {
  margin: 0;
  font-size: 2em;
  color: #355cfc;
  letter-spacing: 1.5px;
  font-weight: 800;
  text-shadow: 0 2px 8px #e0e7ff;
}

.el-button[type="primary"] {
  background: linear-gradient(90deg, #355cfc 0%, #6e8efb 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 24px;
  box-shadow: 0 2px 8px 0 rgba(80, 120, 255, 0.13);
  transition: transform 0.15s, box-shadow 0.2s;
  letter-spacing: 1px;
  padding: 0 22px;
  min-width: 90px;
}
.el-button[type="primary"]:hover {
  transform: translateY(-2px) scale(1.06);
  background: linear-gradient(90deg, #6e8efb 0%, #355cfc 100%);
  box-shadow: 0 6px 18px 0 rgba(80, 120, 255, 0.18);
}
.el-button.is-loading {
  opacity: 0.7;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 0;
}

.el-input {
  border-radius: 12px;
  background: #f4f7ff;
  border: 1.5px solid #e0e7ff;
  transition: border 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px 0 rgba(80, 120, 255, 0.04);
}
.el-input:focus-within {
  border-color: #355cfc;
  box-shadow: 0 0 0 2px #e0e7ff;
}
.el-input__inner {
  background: #f4f7ff !important;
  border-radius: 12px !important;
  font-size: 1em;
  color: #222;
}
.el-input__inner::placeholder {
  color: #b0b3c6;
  opacity: 1;
}

.list-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 6px 32px 0 rgba(80, 120, 255, 0.13);
  backdrop-filter: blur(14px);
  border: 1.5px solid #e0e7ff;
  margin-bottom: 24px;
  position: relative;
  min-height: 320px;
  transition: box-shadow 0.3s, border 0.3s;
}
.list-card:hover {
  box-shadow: 0 12px 48px 0 rgba(80, 120, 255, 0.18);
  border: 1.5px solid #6e8efb;
}

.custom-table .el-table__header th {
  background: linear-gradient(90deg, #e0e7ff 0%, #f5f7fa 100%);
  color: #355cfc;
  font-weight: 700;
  border-radius: 12px 12px 0 0;
  font-size: 1.05em;
}
.custom-table .el-table__row {
  transition: background 0.2s;
}
.custom-table .el-table__row:hover {
  background: #f0f5ff !important;
}

.money {
  color: #f56c6c;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 1px;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0 20px 0;
  color: #b0b3c6;
  font-size: 1.1em;
  animation: fadeIn 0.6s;
}
.empty-tip img {
  width: 120px;
  margin-bottom: 12px;
  opacity: 0.7;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.el-dialog {
  border-radius: 22px !important;
  box-shadow: 0 12px 48px 0 rgba(80, 120, 255, 0.18);
  background: rgba(255,255,255,0.99);
  border: 1.5px solid #e0e7ff;
  animation: fadeIn 0.4s;
}
.el-dialog__header {
  font-size: 1.25em;
  color: #355cfc;
  font-weight: 700;
  letter-spacing: 1px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.el-form-item__label {
  color: #355cfc;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.el-form-item.is-required .el-form-item__label:after {
  color: #f56c6c;
}

/* 响应式布局 */
@media (max-width: 900px) {
  .search-form {
    flex-direction: column;
    gap: 10px;
  }
  .search-form .el-form-item {
    margin-right: 0;
    width: 100%;
  }
  .list-card {
    min-height: 180px;
  }
}
@media (max-width: 600px) {
  .penalty-manage-page {
    padding: 4px;
  }
  .search-header h2 {
    font-size: 1.1em;
  }
  .el-dialog {
    width: 99vw !important;
    min-width: unset !important;
    padding: 0;
  }
  .el-dialog__body {
    padding: 8px !important;
  }
  .el-form-item__label {
    font-size: 0.98em;
  }
}
</style>
